<template>
    <Nav message="小玉严选"></Nav>
    <van-image :src="detalArr.listPicUrl"></van-image>
    <div class="price">
        <span class="symbol">¥</span>
        <span class="real">{{ detalArr.price.basicPrice }}</span>
        <s class="fake">{{ detalArr.price.counterPrice || null }}</s>
    </div>
    <div class="title">
        <span class="name">{{ detalArr.name }}</span>
        <span class="good">{{ detalArr.goodCmtRate }}<br><span class="text">好评率</span></span>
    </div>
    <span class="ttext">推荐理由</span>
    <ol class="tuijian">
        <li v-for="item in detalArr.recommendReason">{{ item }}</li>
    </ol>
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="toLogin"/>
        <van-action-bar-icon icon="cart-o" text="购物车" @click="toLogin"/>
        <van-action-bar-button type="warning" text="加入购物车" @click="toLogin"/>
        <van-action-bar-button type="danger" text="立即购买" @click="toLogin"/>
    </van-action-bar>
</template>
    
<script lang="ts" setup>
import { useNavBar } from "@/hook/Detail"
import { useDetail } from "@/hook/Detail";
import Nav from "@/utils/Nav.vue";
let { detalArr } = useDetail()
let {toLogin} = useNavBar()
</script>
    
<style scoped lang="scss">
.price {
    text-align: left;

    .symbol {
        color: red;
        font-size: 20px;
    }

    .real {
        color: red;
        font-size: 30px;
        font-weight: bold;
    }

    .fake {
        color: gray;
        font-size: 20px;
    }
}

.title {
    display: flex;
    justify-content: space-between;

    .name {
        font-size: 20px;
        font-weight: bold;
    }

    .good {
        color: red;
        font-weight: bold;
        font-size: 16px;

        .text {
            font-size: 12px;
            color: gray;
        }
    }
}

.ttext {
    color: gray;
    font-size: 12px;
}

.tuijian {
    margin: 10px;
    font-size: 13px;
    background-color: #FAFAFA;
    border: #EAEAEA;
}
</style>